<extend name="Common:base" />
<block name="head"></block>
<block name="body">
  <div id="app" class="container">
    <div class="wrapp" v-show="show" style="display:none">
      <el-row>
        <el-col :span="12">
          <el-form :inline="true" ref="searchForm" :model="searchForm">
            <el-form-item prop="name">
             <el-input placeholder="请输入标题关键字" v-model="searchForm.name"></el-input>
            </el-form-item>
            <el-form-item>
             <el-button type="primary" icon="search" @click="loadDatalist">查询</el-button>
             <el-tooltip content="清空搜索框并刷新表格数据" placement="right">
              <el-button  @click="searchReset" style="margin-left:10px;">重置</el-button>
             </el-tooltip>
            </el-form-item>
          </el-form>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table 
          :data="dataList" 
          v-loading="dataLoad"  
          border  stripe 
          element-loading-text="{:L('DATA_LOGIN')}" 
          ref="select"
          @row-click="showDetail"
          >
            <!-- <el-table-column type="selection" align="center" width="50"></el-table-column> -->
            <el-table-column label="序号"  :formatter="handleIndex" width="65"></el-table-column>
            <el-table-column label="公告类型" prop="type" align="center" width="150">
               <template scope="scope">
                  {{ getType(scope.row.type, 'NoticeType') }}
               </template>
            </el-table-column>
            <el-table-column label="公告标题" prop="title"></el-table-column>
            <el-table-column label="公告内容(点击查看详细)" prop="content" >
              <template scope="scope">
                {{ scope.row.content | handleString(10) }}
              </template>
            </el-table-column>
            <el-table-column label="开始日期" prop="start" align="center"></el-table-column> 
            <el-table-column label="截止日期" prop="end" align="center"></el-table-column> 
            <el-table-column label="发布人" prop="user"></el-table-column>
            {:$viewDecorator['oprate']}
          </el-table>
        </el-col>
      </el-row>

      <el-row type="flex"  justify="space-between" align="middle"  class="row-bg">
            <el-col :span="12">
              <div class="grid-content bg-purple">
                {:$viewDecorator['button']}

                 


              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light pull-right">
            <!-- page -->
            <include file="Common:_pagination" />
            <!-- / page -->
              </div>
            </el-col>
      </el-row>
    </div>

    <div class="dialogWrapper" v-show="show" style="display: none">

      <!-- 添加公告 -->
      <include file="_add" />
      <!-- / 添加公告 -->

      <!-- 编辑 -->
      <include file="_edit" />
      <!-- / 编辑 -->

      <!-- 编辑 -->
      <include file="_detail" />
      <!-- / 编辑 -->

    </div>

  </div>
</block>
<block name="scripts">
<script>
  window.defaultOption.setDatas({
    detailContent:"",
    detailFormDialog:false,
    NoticeType:{:json_encode($NoticeType)},
    addRules:{
      title:[
         { required: true, message: '请输入公告标题', trigger: 'blur'},
      ],
      type:[
         { required: true, message: '请选择公告类型', trigger: 'blur'},
      ],
      content:[
        {required: true, message: '请输入公告内容', trigger: 'blur'},
      ],
      // start:[
      //   {required: true, message: '请选择开始时间', trigger: 'blur'},
      // ],
      // end:[
      //   {required: true, message: '请选择截止时间', trigger: 'blur'},
      // ],
    }
  }).setForm('search',{
    name:'',
  }).setForm('add',{
    type:'',
    title:'',
    content:'',
    start:'',
    end:'',
  }).setForm('edit',{
    id:"",
    type:'',
    title:'',
    content:'',
    start:'',
    end:'',
  }).setMethod('getType', function(type, field){
     return this[field][type];
  }).setMethod('showDetail', function(row){
    this.detailContent = row.content;
    this.openDialog('detail');
  });
</script>
</block>